<template>
  <div id="supplies">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable rowKey="ncProjectId" :btns="btns" :tableData="Data" :tableColumn="tableColumn" :pageConfig="pageConfig" @refresh="getList"></DataTable>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      :title="typeLog=='add'?'新增项目':'编辑项目'"
      :visible="formVisible"
      @hideDialog="hideFormVisible"
      @confirm="confirmHandle()"
    />
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class supplies extends Vue {
  typeLog:any = 'add'
    formVisible:boolean = false
    searchForm: any = {
      ncProjectName: '',
      inuseStatus: undefined
    }
    deptAreaList:any = []
  get filterData () {
    return {
      ncProjectName: {
        label: '项目名称',
        type: 'input',
        template: {
          placeholder: '请输入项目名称',
          clearable: true
        }
      },
      inuseStatus: {
        label: '项目状态',
        type: 'select',
        width: 200,
        template: {
          placeholder: '请选择项目状态',
          clearable: true,
          options: [{
              value: '',
              label: '全部'
          },
          {
              value: '1',
              label: '在建'
          },
          {
              value: '2',
              label: '完工'
          },
          {
              value: '3',
              label: '装修'
          }
          ]
        }
      }
    }
  }
  get btns () {
    return [
      {
        label: '添加项目',
        callback: () => {
          this.showAddLog()
        }
      }
    ]
  }
  get rows () {
    return {
      projectId: {
        label: '项目选择',
        el: 'select',
        placeholder: '请选择项目',
        options: this.projectList,
        callback: this.handSelectProject,
        clearable: true,
        showDisabled: this.typeLog != 'add',
        popupScroll: this.popupScroll,
        search: this.searchProject,
        showSearch: true,
        rules: [{ required: true, message: '请选择项目', trigger: 'blur' }]
      },
      inuseStatus: {
        label: '项目状态',
        el: 'select',
        placeholder: '请选择项目',
        options: [{value: '1', label: '在建'}, {value: '2', label: '完工'}, {value: '3', label: '装修'}],
        // callback: this.handSelectProject,
        showSearch: false,
        rules: [{ required: true, message: '请选择项目状态', trigger: 'blur' }]
      },
      areaId: {
        label: '所属区域',
        el: 'select',
        showSearch: true,
        options: this.deptAreaList,
        placeholder: '请选择所属区域',
        callback: this.handSelectAreId
      }
    }
  }
  form: any = {
    projectId: undefined,
    inuseStatus: undefined,
    areaId: undefined,
    areaName: ''
  };
  shearchVal:any = ''
  Data: any[] = []
  statusList:any[] = ['', '在建', '完工', '装修']
  tableColumn: any = {
    index: {
        label: '序号'
    },
    code: {
      label: '项目编码'
    },
    ncProjectName: {
      label: '项目名称'
    },
    areaName: {
      label: '区域公司'
    },
    inuseStatus: {
      label: '项目状态',
      map: this.statusList
    },
    action: {
      label: '操作',
      width: 120,
      template: [
        {
          tag: 'a',
          text: '编辑',
          callback: (row:any) => {
            this.showEd(row)
          }
        },
        {
          tag: 'router-link',
          text: '详情',
          query: {
            _alias: 'detail',
            ncProjectId: ''
          },
          path: '/projectManagement/projectManagementDetail'
        }
      ]
    }
  }
  projectList:any[] =[]
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  tt:any = null
  currentPage:any = 1
  // 关闭弹窗
  hideFormVisible () {
      this.typeLog = 'add'
      this.formVisible = false
      this.form.projectId = undefined
      this.form.inuseStatus = undefined
      this.form.areaId = undefined
      this.form.areaName = ''
      this.projectList = []
      this.currentPage = 1
  }
  showAddLog () {
    this.formVisible = true
    this.getProjectList()
  }
  showEd (row:any) {
    console.log(row)
    this.typeLog = 'ed'
    this.formVisible = true
    this.form.projectId = row.ncProjectId
    this.form.inuseStatus = row.inuseStatus + ''
    this.form.areaId = row.areaId
    this.form.areaName = row.areaName
    this.projectList = [{label: row.ncProjectName, value: row.ncProjectId}]
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (scrollHeight - scrollTop === clientHeight) {
        this.currentPage++
        this.getProjectList()
      }
  }
  // 新增
  confirmHandle () {
    let data = {
      ...this.form
    }
    this.$api.projectAddOrUpdateNcProjectFetch(data).then((res:any) => {
      if (res.code == 0) {
        this.$message.success('添加成功');
        this.hideFormVisible()
        this.getList()
      }
    }).catch()
  }
  get getSearchForm () {
    return {
      ncProjectName: this.searchForm.ncProjectName,
      inuseStatus: this.searchForm.inuseStatus
    }
  }
  searchProject (val:any) {
    this.projectList = []
    this.shearchVal = val
    clearTimeout(this.tt)
    this.tt = setTimeout(() => {
      this.currentPage = 1
      this.getProjectList()
    }, 500);
  }
  // 获取项目列表
  getProjectList () {
    let data = {
      searchValue: this.shearchVal,
      page: this.currentPage,
      size: 100
    }
    this.$api.projectProjectListFetch(data).then(res => {
      if (res.code == 0) {
        res.data.records.map((item:any) => {
          item.value = item.ncProjectId
          item.label = item.ncProjectName
        })
        let projectList = this.projectList.concat(res.data.records)
        this.projectList = projectList
      }
    }).catch()
  }
  // 获取区域公司列表
  getProjectDeptAreaFetch () {
    this.$api.projectDeptAreaFetch().then(res => {
      if (res.code == 0) {
        res.data.forEach((item:any) => {
          item.value = item.areaId
          item.label = item.areaName
        })
        this.deptAreaList = res.data
      }
    }).catch()
  }
  // 选择区域
  handSelectAreId (val:any) {
    this.form.areaName = this.deptAreaList.filter((item:any) => item.areaId == val)[0].areaName
  }
    // 选择项目
    handSelectProject (val:any) {

    }
  init () {
    this.getList()

    this.getProjectDeptAreaFetch()
  }
  getList () {
    let data = {
      ...this.getSearchForm,
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    }
    this.$api.projectNcProjectListFetch(data).then((res: any) => {
      res.data.records.map((item:any, index:any) => {
        item.index = this.pageConfig.pageSize * (this.pageConfig.current - 1) + (index + 1)
      })
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current
        this.getList()
      }
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
}
</script>
<style lang='scss' scoped>

</style>
